<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS 文本超出提示效果</title>
    <style>
      @keyframes move {
        to {
          transform: translateX(-50%); /*位移到 50% 时 迅速归位*/
        }
      }
      html,
      body {
        width: 100%;
      }
      body {
        margin: 0;
        padding: 10px;
        box-sizing: border-box;
      }
      p {
        margin: 0;
      }
      .panel {
        width: 98%;
        margin-top: 10px;
        border: 1px solid #dedede;
        padding: 5px;
        border-radius: 2px;
      }
      .wrap {
        height: 1.5em; /* 设置高度为1行，超出部分隐藏 */
        line-height: 1.5;
        overflow: hidden;
      }
      .wrap1 {
        position: relative;
      }
      .txt {
        display: block;
        max-height: 3em; /* 最大高度为2行 */
      }
      .title,
      .title1,
      .title2,
      .title3,
      .title4,
      .title5,
      .title6 {
        background-color: white;
        position: relative;
        top: -3em; /* 向上移动2行 */
        display: block;
      }
      .wrap1 .title3,
      .wrap1 .titl4 {
        position: absolute;
      }
      .title {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
      .title1::before {
        content: attr(title);
        display: inline-block;
        width: 50%;
        float: right;
        direction: rtl;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
      .title2 {
        text-align: justify;
        vertical-align: top;
      }
      .title2::before {
        content: attr(title);
        display: inline-block;
        width: 50%;
        float: right;
        direction: rtl;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
      .title3 {
        font-size: 0;
        text-align: justify;
        width: 100%;
      }
      .title3 .title3-left,
      .title3 .title3-right {
        display: inline-block;
        width: 50%;
        font-size: 16px;
      }
      .title3 .title3-right {
        direction: rtl;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        vertical-align: top;
      }
      .title4 {
        display: flex;
        justify-content: space-between;
        text-align: justify;
      }
      .title4 .title4-left,
      .title4 .title4-right {
        flex-grow: 1;
      }
      .title4 .title4-right {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        direction: rtl;
      }
      .title5 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        text-align: justify;
      }
      .title5 .title5-right {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        direction: rtl;
      }
      .title6 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        text-align: justify;
      }
      .title6::after {
        content: attr(title);
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        direction: rtl;
      }
    </style>
  </head>
  <body>
    <div class="panel">
      <h3>多行末尾省略号</h3>
      <p class="wrap">
        <span class="txt"
          >元素会被移出正常文档流，并不为元素预留空间，通过指定元素相对于最近的非
          static
          定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。</span
        >
        <span
          class="title"
          title="元素会被移出正常文档流，并不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。"
          >元素会被移出正常文档流，并不为元素预留空间，通过指定元素相对于最近的非
          static
          定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。</span
        >
      </p>
    </div>
    <div class="panel">
      <h3>多行中间尾省略号(伪元素 + floag: right)</h3>
      <p class="wrap">
        <span class="txt"
          >元素会被移出正常文档流，并不为元素预留空间，通过指定元素相对于最近的非
          static
          定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。</span
        >
        <span
          class="title1"
          title="元素会被移出正常文档流，并不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。"
          >元素会被移出正常文档流，并不为元素预留空间，通过指定元素相对于最近的非
          static
          定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。</span
        >
      </p>
    </div>
    <div class="panel">
      <h3>多行中间尾省略号(伪元素 + floag: right + text-align: justify)</h3>
      <p class="wrap">
        <span class="txt"
          >元素会被移出正常文档流，并不为元素预留空间，通过指定元素相对于最近的非
          static
          定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。</span
        >
        <span
          class="title2"
          title="元素会被移出正常文档流，并不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。"
          >元素会被移出正常文档流，并不为元素预留空间，通过指定元素相对于最近的非
          static
          定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。</span
        >
      </p>
    </div>
    <div class="panel">
      <h3>多行中间尾省略号(inline-block + text-align: justify)</h3>
      <p class="wrap wrap1">
        <span class="txt"
          >元素会被移出正常文档流，并不为元素预留空间，通过指定元素相对于最近的非
          static
          定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。</span
        >
        <span
          class="title3"
          title="元素会被移出正常文档流，并不为元素预留空间，通过指定元素相对于最近的非static定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。"
        >
          <span class="title3-left"
            >元素会被移出正常文档流，并不为元素预留空间，通过指定元素相对于最近的非
            static
            定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。</span
          >
          <span class="title3-right"
            >元素会被移出正常文档流，并不为元素预留空间，通过指定元素相对于最近的非
            static
            定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。</span
          >
        </span>
      </p>
    </div>
    <div class="panel">
      <h3>多行中间尾省略号(flex + text-align: justify)</h3>
      <p class="wrap">
        <span class="txt"
          >元素会被移出正常文档流，并不为元素预留空间，通过指定元素相对于最近的非
          static
          定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。</span
        >
        <span
          class="title4"
          title="元素会被移出正常文档流，并不为元素预留空间，通过指定元素相对于最近的非static定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。"
        >
          <span class="title4-left"
            >元素会被移出正常文档流，并不为元素预留空间，通过指定元素相对于最近的非
            static
            定位祖先元素的偏移，来确定元素位置。对定位的元以设置外边距（margins），且不会与其他边距合并。</span
          >
          <span class="title4-right"
            >元素会被移出正常文档流，并不为素预留空间，通过指定元素相对于最近的非
            static
            定位祖先元素的偏移，来确定元素位置。绝对定元素可以设置外边距（margins），且不会与其他边距合并。</span
          >
        </span>
      </p>
    </div>
    <div class="panel">
      <h3>多行中间尾省略号(grid + text-align: justify)</h3>
      <p class="wrap">
        <span class="txt"
          >元素会被移出正常文档流，并不为元素预留空间，通过指定元素相对于最近的非
          static
          定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。</span
        >
        <span
          class="title5"
          title="元素会被移出正常文档流，并不为元素预留空间，通过指定元素相对于最近的非static定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。"
        >
          <span class="title5-left"
            >元素会被移出正常文档流，并不为元素预留空间，通过指定元素相对于最近的非
            static
            定位祖先元素的偏移，来确定元素位置。对定位的元以设置外边距（margins），且不会与其他边距合并。</span
          >
          <span class="title5-right"
            >元素会被移出正常文档流，并不为素预留空间，通过指定元素相对于最近的非
            static
            定位祖先元素的偏移，来确定元素位置。绝对定元素可以设置外边距（margins），且不会与其他边距合并。</span
          >
        </span>
      </p>
    </div>
    <div class="panel">
      <h3>多行中间尾省略号(grid + 伪元素 + text-align: justify)</h3>
      <p class="wrap">
        <span class="txt"
          >元素会被移出正常文档流，并不为元素预留空间，通过指定元素相对于最近的非
          static
          定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。</span
        >
        <span
          class="title6"
          title="元素会被移出正常文档流，并不为元素预留空间，通过指定元素相对于最近的非static定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。"
          >元素会被移出正常文档流，并不为元素预留空间，通过指定元素相对于最近的非static定位祖先元素的偏移，来确定元素位置。对定位的元以设置外边距（margins），且不会与其他边距合并。
        </span>
      </p>
    </div>
  </body>
</html>
